<template>
	<ly-frow-center class="header">
		
	<!-- header start -->
		<span class="marr title">学员管理</span>
		<el-button size="mini" icon="el-icon-user">添加学员</el-button>
		<el-button size="mini" icon="el-icon-s-order">添加排课</el-button>
		<el-button size="mini" icon="el-icon-delete">删除</el-button>
		<el-select clearable size="mini" v-model="select" placeholder="请选择班级" class="select marl">
			<el-option size="mini" v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
		</el-select>
		<el-autocomplete clearable size="mini" suffix-icon="el-icon-search" style="position: relative;left:-10px;"
		 v-model="state" :fetch-suggestions="querySearch" placeholder="请输入学员姓名" :trigger-on-focus="false" 
		 @select="handleSelect" ></el-autocomplete>
	<!-- header end -->
	</ly-frow-center>
	<div class="main">
		
	<!-- table start -->
			<el-table
				ref="multipleTable"
				:data="dataStudent"
				tooltip-effect="dark"
				style="width: 100%"
				@selection-change="handleSelectionChange"
			>
				<el-table-column type="selection" width="55"> </el-table-column>
				<el-table-column prop="name" label="姓名" >
					<template #default="scope">
						<ly-frow-center @click="showDialogKb(scope.row.name)">
							<el-avatar shape="square" :size="30"
							 :src="'https://api.eshareedu.cn/edusystems/upload/'+scope.row.photo"></el-avatar>
							 &nbsp;&nbsp;
							 {{scope.row.name}}
						</ly-frow-center>
					</template>
				</el-table-column>
				<el-table-column prop="sex" label="性别"> 
					<template #default="scope">
						{{ scope.row.sex == '1' ? '男' : '女'}}
					</template>
				</el-table-column>
				<el-table-column prop="birthday" label="生日"> </el-table-column>
				<el-table-column prop="" label="年龄"> 0 </el-table-column>
				<el-table-column prop="addtime" label="入学时间" width="130px">
					<template #default="scope">
						{{ scope.row.addtime.substr(0, scope.row.addtime.length-5) }}
					</template>
				</el-table-column>
				<el-table-column prop="stateName" label="状态"> </el-table-column>
				<el-table-column prop="state" label="课程消耗"> </el-table-column>
				<el-table-column prop="" label="操作">
					<template #default="scope">
						<ly-rscrollbar>
							<el-button type="text" size="small"> 购课 </el-button>
							<el-button type="text" size="small"> 记录 </el-button>
							<el-button type="text" size="small"> 修改 </el-button>
							<el-button type="text" size="small"> 删除 </el-button>
							<el-button type="text" size="small" @click="showDialogKb(scope.row.name)"> 课程 </el-button>
						</ly-rscrollbar>
					</template>
				</el-table-column>
			</el-table>
	<!-- table ned -->
	
	</div>
	
	<!-- 课表 dialog start -->
	<el-dialog :title="kbDialogName" v-model="dialogTableVisible" width="90%" v-loading="loading">
		<div class="kbDialog">
			<div class="flex">
				
				<div class="left">
					<div class="top">
						<div class="title"> 学员信息 </div>
						略
					</div>
					
					<div class="botton">
						略
					</div>
				</div>
				
				<div class="right">
					<el-tabs v-model="activeName">
						<el-tab-pane label="按月排课" name="first">
							<el-calendar v-model="value"> 
								<template #dateCell="{data}">
									<center>{{data.day.split('-')[2]}}</center>
							    {{data.day}},
									{{ new Date(data.day).getTime() }}
							  </template>
							</el-calendar>
						</el-tab-pane>
						<el-tab-pane label="按日显示" name="second">按日显示</el-tab-pane>
					</el-tabs>
				</div>
				
			</div>
		</div>
	</el-dialog>
	<!-- 课表 dialog start -->
	
</template>

<script>
	import {onMounted} from 'vue'
	export default {
		data() {
			const restaurants = []
			const querySearch = (queryString, cb) => {
				var results = queryString
					?	restaurants.value.filter(createFilter(queryString))
					:	restaurants.value
				
				cb(results);
			};
			const createFilter = (queryString) => {
				return (restaurant) => {
					return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
				}
			};
			const loadAll = () => {
				return [{
					value: "Hot honey 首尔炸鸡（仙霞路）",
					address: "上海市长宁区淞虹路661号",
				}];
			};
			const handleSelect = (item) => {
				console.log(item);
			};
			onMounted(() => {
				restaurants.value = loadAll();
			});
			return {
				// header
				options: [{
					value: '选项1',
					label: '黄金糕'
				}],
				select: '',				restaurants,				state: '',
				querySearch,			createFilter,				loadAll,
				handleSelect,
				// table s
				dataStudent: [],
				params: {
					'name': '',			'courseid':'',			'classid': '',
					'page': '1',		'psize': ''
				},
				// 分页
				counts: 0,
				// form start
				form: {},
				// 课表 dialog
				dialogTableVisible: true,
				kbDialogName: '',
				value: new Date(),
				activeName: 'first',
				loading: true,
			}
		},
		created() {
			this.listStudent();
		},
		methods:{
			listStudent(){
				/**
				 * 学员列表
				 */
				let self = this
				this.axios.get('http://www.eshareedu.cn/edusystems/api/students/list', this.params).then(res => { 
					if(res.data.errCode != '10000') return self.$message.error('加载失败')
					
					console.log(res.data.data.list)
					this.counts = res.data.data.counts
					this.dataStudent = res.data.data.list
				})
			},
			
			
			// 课表 dialog
			showDialogKb(res){
				this.kbDialogName = res
				this.dialogTableVisible = true
				
				// this.axios.get('http://www.eshareedu.cn/edusystems/api/students/get').then(info => { 假数据
				// 	console.log('a',info.data.data)
				// })
			},
			
			
			handleSelectionChange(val) {
				console.log('lya', val)
				this.multipleSelection = val;
			}
		}
	}
</script>

<style lang="less" scoped>
	.header{
		.title{background-color: white;width: 140px;height: 40px;line-height: 40px;text-align: center;}
		.select{position: relative;z-index: 1;}
	}
	.main{
		background-color: white;padding: 20px;height: 94%;box-sizing: border-box;
	}
	
	.kbDialog{
		height: 700px;background-color: #eee;
		div{border: 1px solid red;}
		.left{
			margin-right: 20px;
			.title{height: 50px;line-height: 50px;text-indent: 2em;background-color: #1890ff;color: white;}
			.top{width: 250px;height: 350px;border-radius: 8px;overflow: hidden;margin-bottom: 20px;}
			.botton{width: 250px;height: 300px;}
		}
		.right{
			flex: 1;padding: 0 20px;background-color: white;
		}
	}
	
</style>
